<template>
    <div>
        <!-- 搜索和筛选区域 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="searchForm.patientName" placeholder="请输入患者姓名"></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
                <el-input v-model="searchForm.orderId" placeholder="请输入患者姓名"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="searchForm.orderStatus" placeholder="请选择订单状态">
                    <el-option
                            v-for="item in statusOptions"
                            :value="item.orderStatus"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-date-picker
                v-model="searchForm.paymentTime1"
                start-placeholder="开始日期"
                ></el-date-picker>
              <el-date-picker
                v-model="searchForm.paymentTime2"
                start-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm()">重置</el-button>
                <el-button type="primary" @click="exportData">导出数据</el-button>
                <el-button @click="handleOperation()">查看订单详情</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格区域 -->
        <el-table :data="ReList"
                  style="width: 100%">
<!--            <el-table-column prop="index" label="序号" ></el-table-column>-->
            <el-table-column prop="orderId" label="订单编号"></el-table-column>
            <el-table-column prop="isPrescription" label="是否处方药" >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.isPrescription == '1' ? 'primary' : 'success'"
                  disable-transitions>{{ scope.row.isPrescription == '1' ? '处方药' : '非处方药'}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="patientName" label="患者姓名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="orderAmount" label="订单金额（元）"></el-table-column>
            <el-table-column prop="paymentTime" label="付款时间"></el-table-column>
            <el-table-column prop="assignee" label="分配人"></el-table-column>
            <el-table-column prop="assignTime" label="分配时间"></el-table-column>
            <el-table-column prop="receiptTime" label="收货时间"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[4,5,6,7]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
</template>

<script>
import { orderStatusList, RestorativesList } from '@/api/drugorder/order'
export default {
  name:"",
  data() {
    return {
      ReList:[],
      searchForm: {
        orderId: '',
        patientName: '',
        orderStatus: '',
        paymentTime1: '',
        paymentTime2: ''
      },
      orderForm: {
        orderId: '',// 订单编号
        isPrescription: '',// 是否处方药
        patientName: '',// 患者姓名
        phone: '',// 电话
        orderAmount: '',// 订单金额
        paymentTime: '',// 付款时间
        assignee: '',// 分配人
        assignTime: '',// 分配时间
        receiptTime: '',// 收货时间
        orderStatus: ''// 订单状态
      },
      statusOptions: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
    };
  },
  methods: {
    // 订单列表查询
    getList() {
      RestorativesList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        patientName: this.searchForm.patientName,
        orderId: this.searchForm.orderId,
        orderStatus: this.searchForm.orderStatus,
        dateRange: this.searchForm.dateRange,
        paymentTime1: this.searchForm.paymentTime1,
        paymentTime2: this.searchForm.paymentTime2,
      }).then(res => {
        this.ReList = res.data.list;
        this.total = res.data.total;
      });
    },
    // 订单状态查询
    getOrderStatus() {
      orderStatusList().then(res => {
        this.statusOptions = res.data;
        // console.log(this.statusOptions)
      })
    },
    search() {
      this.pageNum = 1;
      this.getOrderStatus()
      this.getList();
    },
    resetForm() {
      this.searchForm = {};
    },
    exportData() {
      window.open("http://localhost:8888/restoratives/export/excel")
    },
    handleOperation() {
      this.$router.push('/orderManage/details');
    },
    // 处理分页
    handleSizeChange(size) {
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getList();
    },
  },
  created() {
    this.resetForm();
    this.getList();
    this.getOrderStatus();
  },
};
</script>

<style scoped>
/* 样式调整 */
.demo-form-inline {
    margin-bottom: 20px;
}
</style>
